<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AddUser Page</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/addUser.css" rel="stylesheet">
    <!-- 引用外部JS文件 -->
    <script src="${pageContext.request.contextPath}/static/js/addUser.js"></script>
    <!-- 保留JSP特定代码 -->
    <script>
        window.onload = function() {
            generatePhoneNumbers();
            <% if (request.getAttribute("phoneExists") != null && (boolean) request.getAttribute("phoneExists")) { %>
                alert("手机号已存在，请选择其他手机号！");
            <% } %>
        };
    </script>
</head>
<body>
    <div class="content-container">
        <h2 class="page-title">添加用户</h2>
        <form action="${pageContext.request.contextPath}/addUser" method="post" class="space-y-6" onsubmit="return validateForm();">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username">
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password">
            </div>
            <div class="form-group">
                <label for="phone">选择手机号:</label>
                <input type="text" id="phone" name="phone" readonly>
            </div>
            <div class="form-group">
                <label>可选手机号:</label>
                <div id="phone-numbers" class="mt-2"></div>
            </div>
            <div class="form-group">
                <label for="userpackage">套餐:</label>
                <select id="userpackage" name="userpackage">
                    <option value="1">套餐 1: 20 条短信, 1GB 流量, 200 分钟话费, 花费 50 元</option>
                    <option value="2">套餐 2: 0 条短信, 10GB 流量, 0 分钟话费, 花费 60 元</option>
                    <option value="3">套餐 3: 50 条短信, 5GB 流量, 500 分钟话费, 花费 150 元</option>
                </select>
            </div>
            <div class="form-group">
                <label for="balance">输入预存金额:</label>
                <input type="text" id="balance" name="balance">
            </div>
            <div class="error-message">当前余额不足套餐余额，请重新充值</div>
            <div class="flex justify-center">
                <input type="submit" value="添加" class="submit-btn">
            </div>
        </form>
        <!-- 添加退出按钮 -->
        <div class="flex justify-center mt-4">
            <button onclick="window.location.href='${pageContext.request.contextPath}/getAllUsers'" class="exit-btn">退出</button>
        </div>
    </div>
</body>
</html>